<template>
  <div class="wrap">
    <el-calendar class="calendar" v-model="value" @click.native="handleNum"></el-calendar>
  </div>
</template>

<script>
export default {
    name: "calendar.vue",
    data () {
        return {
            value: new Date()
        }
    },
    methods: {
        handleNum () {
            console.log("text")
        }
    }
} //<el-calendar  v-model="value"></el-calendar>
</script>

<style scoped>
    .wrap {
        width:200px;
        height: 200px;
        background-color: pink;
    }
 >>>.el-calendar-table .el-calendar-day {
        height: 15px;
        width: 30px;
        font-size: 12px;
        line-height: 0px;
 }
 >>>.el-button-group {
     display: flex;
 }
 >>>.el-calendar__header {
     display: grid;
 }
 >>>.el-calendar__button-group {
     width: 150px;
     text-align: center;
 }
 >>>.el-button-group .el-button {
    width: 50px;
 }
 
</style>